<template>
	<div class="text_con">
		<div class="top_title">文案({{wordList?.length}})</div>
		<div class="text_com">
			<div class="word_item" v-for="(word_item, word_index) in wordList" :key="word_index">
				<div :style="textConStyle">
					<div class="text_item" :style="textItemStyle(item, index)" v-for="(item, index) in word_item.list" :key="index">
						<div :style="wordStyle(item, index)">{{item.copywriting}}</div>
					</div>
					
					<div class="back_con single_image" :style="`--backImage: url(${imageArr[0]?.material_url})`" v-if="image_tpl == 'single_image' && imageArr?.length">
					</div>
					
					<div class="back_con couple_image_9_16" v-if="image_tpl == 'couple_image_9_16' && imageArr?.length">
						<div class="image_item" 
							v-for="(item, index) in imageArr.filter((a, i)=>i<=1)"
							:style="`--backImage: url(${item?.material_url})`">
						</div>
					</div>
					
					<div class="back_con couple_image_16_9" v-if="image_tpl == 'couple_image_16_9' && imageArr?.length">
						<div class="image_item" 
							v-for="(item, index) in imageArr.filter((a, i)=>i<=1)"
							:style="`--backImage: url(${item?.material_url})`">
						</div>
					</div>
					
					<div class="back_con couple_image_1_1" v-if="image_tpl == 'couple_image_1_1' && imageArr?.length">
						<div class="image_item" 
							v-for="(item, index) in imageArr.filter((a, i)=>i<=1)"
							:style="`--backImage: url(${item?.material_url})`">
						</div>
					</div>
					
					<div class="back_con four_image_9_16" v-if="image_tpl == 'four_image_9_16' && imageArr?.length">
						<div class="image_item" 
							v-for="(item, index) in imageArr.filter((a, i)=>i<=3)"
							:style="`--backImage: url(${item?.material_url})`">
						</div>
					</div>
					
					<div class="back_con four_image_1_1" v-if="image_tpl == 'four_image_1_1' && imageArr?.length">
						<div class="image_item" 
							v-for="(item, index) in imageArr.filter((a, i)=>i<=3)"
							:style="`--backImage: url(${item?.material_url})`">
						</div>
					</div>
				</div>
				<div class="operate_con">
					<span>文字组合{{word_index + 1}}</span>
					<FormOutlined class="operate_icon" @click="addThisWord(word_item)" />
					<DeleteOutlined @click="deleteWord(word_index)" class="operate_icon" />
				</div>
				<div class="loading_con" v-if="loading">
					<LoadingOutlined style="font-size: 27px;" />
				</div>
			</div>
			<div class="add_con" @click="addThisWord">
				<PlusOutlined />
				添加组合
			</div>
		</div>
	</div>
	<addCombination :visible="addVisible" :wordObj="wordObj" @close="closeAdd"  />
</template>

<script>
	import {
		defineComponent,
		reactive,
		toRefs,
		nextTick,
		watch,
		ref,
		computed,
	} from "vue";
	import store from '@/store';
	import {message} from 'ant-design-vue';
	import {PlusOutlined, FormOutlined, DeleteOutlined, LoadingOutlined} from '@ant-design/icons-vue';
	import addCombination from './addCombination.vue';
	const radioValue = 2.67
	export default defineComponent({
		props: {
			index: {
				type: Number,
				default: 0
			}
		},
		components: {
			PlusOutlined,
			FormOutlined,
			DeleteOutlined,
			LoadingOutlined,
			addCombination
		},
		setup(props, context){
			const state = reactive({
				wordList: [],
				loading: false,
				addVisible: false,
				wordObj: {},
				imageArr: [],
				image_tpl: 'single_image',
				radioType: '9:16',
				currentRadioHeight: 640
			})
			
			const addThisWord = (item) => {
				if(item){
					state.wordObj = Object.assign({}, item)
				}
				state.wordObj['image_tpl'] = state.image_tpl
				state.wordObj['radioType'] = state.radioType
				state.wordObj['imageArr'] = state.imageArr
				state.wordObj['currentRadioHeight'] = state.currentRadioHeight
				state.addVisible = true
			}
			const closeAdd = (obj) => {
				if(!obj) {
					state.addVisible = false
					return
				}
				if(obj){
					let index = state.wordList?.findIndex(item=>item.name == obj.name)
					if(index == -1){
						state.wordList.push(obj)
					} else {
						state.wordList[index] = obj
					}
					state.loading = true
					state.wordList.map((first_item, first_index)=>{
						first_item.list.map((second_item, second_index)=>{
							customFont(second_item.font_family, second_item.typeface)
						})
					})
				}
				state.wordObj = {}
				state.addVisible = false
				submitStuctrue()
			}
			
			const deleteWord = (index) =>{
				state.wordList.splice(index, 1)
				submitStuctrue()
			}
			
			const submitStuctrue = () => {
				let submitList = []
				state.wordList.map((parent_item, parent_index)=>{
					let parentList = []
					let objData = {}
					objData['main'] = {}
					objData['deputy'] = {}
					parent_item.list.map((item, index)=>{
						let submitData = {}
						submitData['content'] = item.copywriting
						submitData['config'] = {}
						submitData['config']['x'] = Number((item.elLeft/360).toFixed(3))
						let radioHeight = state.radioType == '1:1'?360:state.radioType == '16:9'?202.5:state.radioType == '9:16'?640:state.currentRadioHeight
						submitData['config']['y'] = Number((item.elTop/radioHeight).toFixed(3))
						submitData['config']['font'] = item.typeface
						submitData['config']['font_color'] = item.color
						submitData['config']['font_random'] = false
						let font_size = item.font_size
						if(state.radioType == '1:1'){
							font_size = (1080 / 360) * item.font_size
						} else if(state.radioType == '16:9') {
							font_size = (1920 / 360) * item.font_size
						} else if(state.radioType == '9:16') {
							font_size = (1080 / 360) * item.font_size
						} else {
							font_size = (1080 / 360) * item.font_size
						}
						submitData['config']['font_size'] = font_size
						submitData['config']['location'] = 'center'
						if(index == 0){
							objData['main'] = submitData
							objData['main']['originData'] = state.wordList
						}
						if(index == 1){
							objData['deputy'] = submitData
						}
					})
					submitList.push(objData)
				})
				// 处理store
				let resource_data = store.getters.clipJSON?.resource_data
				resource_data[props.index]['texts'] = submitList
				store.dispatch('SetClipJSONResourceData', resource_data)
			}
			
			const customFont = (name, url) => {
				const fontFace = new FontFace(name, `url(${url})`);
				fontFace.load().then(() => {
					document.fonts.add(fontFace);
					state.loading = false
				}).catch((error) => {	
					console.error(error);
					state.loading = false
				});
			}
			
			const textConStyle = computed(()=>{
				getRatio()
				let radioHeight = state.radioType == '1:1'?360:state.radioType == '16:9'?202.5:state.radioType == '9:16'?640:state.currentRadioHeight
				return {
					position: 'relative',
					backgroundImage: `url('https://hf.pigcms.com/static/wxapp/images/phone_black_back.png')`,
					backgroundSize: '100% auto',
					backgroundPosition: 'center center',
					backgroundRepeat: 'no-repeat',
					width: 360/radioValue + 'px',
					height: radioHeight/radioValue + 'px'
				}
			})
			
			const wordStyle = computed(() => {
				return function(item, index) {
					return {
						'font-family': item.font_family,
						'font-size': item.font_size/radioValue + 'px',
						'width': item.width/radioValue + 'px',
						'height': item.height/radioValue + 'px',
						'color': item.color,
						'line-height': item.height/radioValue + 'px',
						'white-space': 'nowrap',
						'text-align': 'center'
					}
				}
			})
			
			const textItemStyle = computed(()=>{
				return function(item, index) {
					return {
						'position': 'absolute',
						'width': item.width/radioValue + 'px',
						'height': item.height/radioValue + 'px',
						'left': item.elLeft/radioValue +'px',
						'top': item.elTop/radioValue +'px'
					}
				}
			})
			
			const getRatio = () => {
				let resource_data = store.getters.clipJSON?.resource_data
				state.imageArr = resource_data[props.index]['images']
				state.image_tpl = resource_data[props.index]['image_tpl']
				if(state.image_tpl == 'couple_image_1_1' || state.image_tpl == 'four_image_1_1'){
					state.radioType = '1:1'
				} else if(state.image_tpl == 'couple_image_9_16' || state.image_tpl == 'four_image_9_16'){
					state.radioType = '9:16'
				} else if(state.image_tpl == 'couple_image_16_9'){
					state.radioType = '16:9'
				} else {
					if(state.imageArr?.length){
						state.radioType = `${state.imageArr[0]?.width}:${state.imageArr[0]?.height}`
						state.currentRadioHeight = 360 / state.imageArr[0]?.width * state.imageArr[0]?.height
					}
				}
			}
			
			watch([()=>props.index, ()=>store.getters.clipJSON?.resource_data[props.index]['image_tpl']], ([val1, val2])=> {
				getRatio()
			}, {
				deep: true,
				immediate: true
			})
			
			watch([()=>props.index, ()=>store.getters.clipJSON?.resource_data], ([val1, val2])=> {
				let resource_data = val2
				if(resource_data?.length && resource_data[props.index]?.texts?.length){
					state.wordList = resource_data[props.index]?.texts[0]?.main?.originData
				} else {
					state.wordList = []
				}
			}, {
				deep: true,
				immediate: true
			})
			
			return{
				...toRefs(state),
				addThisWord,
				closeAdd,
				deleteWord,
				wordStyle,
				textItemStyle,
				textConStyle
			}
		}
	})
</script>

<style lang="less" scoped>
	.back_con{
		position: absolute;
		left: 0px;
		top: 0px;
		width: 100%;
		height: 100%;
		&.single_image{
			background-size: 100% auto;
			background-position: center center;
			background-repeat: no-repeat;
			background-image: var(--backImage);
		}
		
		&.couple_image_9_16{
			display: flex;
			left: 1px;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 100%;
				width: 49.5%;
			}
		}
		
		&.couple_image_16_9{
			display: flex;
			left: 1px;
			align-items: center;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 76px;
				width: 49.5%;
			}
		}
		&.couple_image_1_1{
			display: flex;
			left: 1px;
			align-items: center;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 135px;
				width: 49.5%;
			}
		}
		
		&.four_image_9_16{
			display: flex;
			left: 1px;
			flex-wrap: wrap;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 120px;
				width: 49.5%;
			}
		}
		
		&.four_image_1_1{
			display: flex;
			left: 1px;
			flex-wrap: wrap;
			height: 135px;
			.image_item{
				background-size: auto 100%;
				background-position: center center;
				background-repeat: no-repeat;
				background-image: var(--backImage);
				height: 67.5px;
				width: 49.5%;
			}
		}
	}
	.text_item{
		z-index: 9;
	}
	
	.text_con{
		width: 100%;
		height: 100%;
		.top_title{
			color: #eee;
			font-size: 14px;
		}
		.text_com{
			width: 100%;
			height: calc(100% - 20px);
			margin-top: 10px;
			color: #ddd;
			display: flex;
			flex-wrap: wrap;
			transform: translateX(0px) translateY(-35px);
			.word_item{
				border-radius: 5px;
				width: 135px;
				min-height: 240px;
				background-color: #000;
				margin-top: 35px;
				margin-right: 15px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				position: relative;
				overflow: hidden;
				.loading_con{
					position: absolute;
					width: 100%;
					height: 240px;
					background-color: rgba(0, 0, 0, .3);
					left: 0;
					top: 0;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;
				}
				
				&:hover{
					.operate_con{
						.operate_icon{
							display: block;
						}
					}
				}
				.operate_con{
					position: absolute;
					width: 100%;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
					left: 0;
					bottom: -35px;
					.operate_icon{
						display: none;
						margin-left: 10px; 
						cursor: pointer;
						color: #fff;
					}
				}
			}
			
			.add_con{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #999;
				width: 135px;
				min-height: 240px;
				background-color: #343434;
				border: 1px solid #646464;
				border-radius: 6px;
				cursor: pointer;
				margin-top: 35px;
				margin-right: 15px;
			}
		}
	}
</style>